<template>
	<view>
		<view class="flex benben-position-layout flex flex-wrap align-center zy_flex_0_ibhf"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
			<view class='flex flex-wrap align-center justify-between flex-sub zy_fd0_0_ibhf'>
				<view class='flex flex-wrap align-center zy_fd0_0_c0_ibhf' @tap.stop="back">
					<text class='fu-iconfont2  zy_fd0_0_c0_c0_ibhf'>&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center'>
					<text class='zy_fd0_0_c1_c0_ibhf'>{{current.name}}</text>
				</view>
				<view class='flex flex-wrap align-center justify-end zy_fd0_0_c0_ibhf'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="" style="width: 100%;text-align: center;padding: 200rpx 0 ;">
			<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name"
				:author="current.author" :action="audioAction" controls></audio>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: {
					poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
					name: '致爱丽丝',
					author: '暂无',
					src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
				},
				audioAction: {
					method: 'pause'
				}
			};
		},
		onLoad(option) {
			// this.current.src = uni.getStorageSync('browseaudiu')
			this.current.name = option.name
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.zy_flex_0_ibhf {
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background: #fff;
		background-size: 100% auto !important;

		.zy_fd0_0_ibhf {
			padding: 0rpx 32rpx 0rpx 32rpx;

			.zy_fd0_0_c1_c0_ibhf {
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				line-height: 50rpx;
			}
		}
	}
</style>
